<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0,       user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <title>绘品网官方网站</title>
    <link   href="css/style.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="css/beforeafter-settings.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/beforeafter-content.css" media="screen" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"></script>
    <script type="text/javascript" src="js/freshline/animadrag.js">	</script>
    <script type="text/javascript" src="js/freshline/jquery.freshline.demo.js">	</script>
</head>
<body>
<div class="header">
  <div class="logbar">
  </div>
  <div class="headerbanner">
    
  </div>
  <div class="nav">
     <ul>
	   <li><img src="img/nav1.jpg" /></li>
	   <li><img src="img/nav2.jpg" /></li>
	   <li><img src="img/nav3.jpg" /></li>
	   <li><img src="img/nav4.jpg" /></li>
	   <li><img src="img/nav5.jpg" /></li>
	   <li><img src="img/nav6.jpg" /></li>
	 </ul>
  </div>
</div>
  
<div class="clear"></div>
<div class="main">  

   <div  class="main_top">
     <div class="main_topleft">
	   <!-- banner代码 开始 -->
              <div id="banner" class="beforeafter_slider ">
	   <ul>
		<li>
		    <img src="img/beforeafter/1.jpg" alt="img/beforeafter/2.jpg" />
			<div id="textbox_1" class="before">
				<div id="title_1b" class="fadeup">现在</div>
			</div>
			<div id="textbox_1" class="after">
				<div id="title_1b" class="fadeup">未来</div>
			</div>
		</li>
		<li><img src="img/beforeafter/2before.jpg" alt="img/beforeafter/2after.jpg" />
		</li>
		<li><img src="img/beforeafter/3before.jpg" alt="img/beforeafter/3after.jpg">
		</li>
		<li><img src="img/beforeafter/4before.jpg" alt="img/beforeafter/4after.jpg" />
		</li>
		<li ><img src="img/beforeafter/5before.jpg" alt="img/beforeafter/5after.jpg" />
		</li>
		<li ><img src="img/beforeafter/6before.jpg" alt="img/beforeafter/6after.jpg" />
		</li>
		<li ><img src="img/beforeafter/7before.jpg" alt="img/beforeafter/7after.jpg" />
		</li>
		<li ><img src="img/beforeafter/8before.jpg" alt="img/beforeafter/8after.jpg" />
		</li>
		<li ><img src="img/beforeafter/9translate_details.jpg" alt="img/beforeafter/9translate_details.jpg">
		</li>
		<li ><img src="img/beforeafter/10before.jpg" alt="img/beforeafter/10after.jpg" />
		</li>
	  </ul>
          </div>
<!-- banner代码 结束 -->
	 </div>
	 <div class="main_topright">
	   <ul>
	     <li><img src="img/ritgt1.jpg" width="250" height="84" alt="" /></li>
	     <li><img src="img/ritgt2.jpg"  width="250" height="69" alt="" /></li>   
	     <li><img src="img/ritgt3.jpg" width="250" height="78" alt="" /></li>   
	     <li><img src="img/ritgt4.jpg" width="250" height="93" alt="" /></li>   
	     <li style="display:block"><img src="img/ritgt5.jpg" width="250" height="70" /></li>
       </ul>	   
	 </div>
   </div>
   <div class="clear"></div>
   <div class="main_middle">
     <div class="mid_left">
	   <img src="img/midleft.jpg"/>
	 </div>
	 <div class="mid_mid">
	   <img src="img/midmid.jpg"/>
	 </div>
	 <div class="mid_right">
	   <img src="img/midright.jpg"/>
	 </div>
   </div>
   
   <div class="main_bottom">
   <img src="img/mainbottom.jpg" />
   </div>
  
</div>

<div class="footer">
 <div class="footertop"></div>
</div>
<!-- banner控制js -->
<script type="text/javascript">
	$(function() {
		   $.noConflict();
		  jQuery('#demo-content').freshlineDemo_init();
		jQuery('#banner').beforeAfter_slider(
			{			
				width:738,
				height:394,
				banner_bordersize:1,
				start_from:'right',
				start_pos:230,
				follow:true,
				timer:4000
			}
		)								
	});
</script> 
<!-- banner控制js -->
</body>
</html>